import React from 'react';
import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const DynamicFormItem = ({ name, placeholder, label }) => {
  return (
      <Form.List name={name}>
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <div key={field.key} className="flex w-full" >
                <Form.Item {...field} style={{ flex: 1 }}>
                  <Input placeholder={placeholder ? placeholder : "请输入其他内容"} style={{ width: '100%' }} />
                </Form.Item>
                <MinusCircleOutlined
                  style={{
                    fontSize: '25px',
                    position: 'relative',
                    marginLeft: '8px',
                    top: '2px',
                    cursor: 'pointer'
                  }}
                  onClick={() => remove(field.name)} />
              </div>
            ))}
            <Form.Item>
              <Button
                type="dashed"
                onClick={() => add()}
                className="md:w-3/5 w-full bg-gray-200 border border-gray-300 rounded"
                icon={<PlusOutlined style={{ position: 'relative', top: '-3px' }} />}
              >
                添加项
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
  );
};


export default DynamicFormItem;
